@mixin checkbox-default($width, $height, $imgSrc){
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: $width;
    height: $height;
    background: url(#{$imgSrc}) no-repeat;
    border: none;
    cursor: pointer;
}

@mixin checkbox-status($posX, $posY){
    background-position: $posX $posY;
    &.hover {
        background-position: ($posX - 20px) $posY;
    }
    &.checked {
        background-position: ($posX - 40px) $posY;
    }
    &.disabled {
        background-position: ($posX - 60px) $posY;
        cursor: default;
    }
    &.disabled + &-label {
        color: $color-disabled;
    }
    &.checked.disabled {
        background-position: ($posX - 80px) $posY;
    }
}

@mixin checkbox-pixel($sizeX, $sizeY, $imgSrc){
    background-image: url($imgSrc);
    -webkit-background-size: $sizeX $sizeY;
    background-size: $sizeX $sizeY;
}